<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        /* 函数就是做某件时间，
           完成事件，需要依赖某个人，某个人做了某个事
           谁做了这个事情， this  就是谁 */

        // 1. 全局作用域 或者普通函数中 this 指向全局对象，  window
        //   定时器是 window 的方法 ， this 是window 

        console.log(this);
        function fn(){
            console.log(this);
        }
        // fn()
        window.fn();
        window.setTimeout(function(){
            console.log(this);
        },1000)

        // 2 方法调用谁，  this  指向谁 

        var  a={
            sayHi:function(){
                console.log(this); // this 指向  a
            }
        }
        a.sayHi;

        // 3. 事件中的 this  是绑定的 对象 

        var btn= document.querySelector('button')
        // btn.onclick=function(){
        //     console.log(this);  //  this 指向的是 btn 这个按钮对象
        // }
        btn.addEventListener('click',function(){
            console.log(this);  //  this 指向的是  btn 这个按钮对象
        })

        // 4. 构造函数中 this 指向构造函数的实例 

        function hero(name){
            this.name=name; // 构造函数的目的就是创建对象， 给当前对象添加属性
            console.log(this);  //  this 指向的是  janna 实例对象
        }
        //  构造函数  new  开辟新的内存空间， 创建一个空对象， this 指向这个对象
        // hero()  实例化之后  赋值给janna 
        var janna= new Hero('迪迦')

        // 5 箭头函数， this 对象 就是定义该函数时所在的作用域指向的对象 

        console.log(this);
        setInterval(() => {
            console.log(this);
        }, 2000);
        
    </script>
</body>
</html>